<template>
	<view>
		<view class="bg">
		</view>
		<view class="bg1" v-show="isShow" @click="hideToast">
		</view>
		<view class="wrapper">
			<view class="middle_wrapper">
				<view class="top">
					<view class="num">
						￥{{packageList.price}}
					</view>
					<view class="order_sn">
						订单号：{{packageList.order_sn}}
					</view>
					<!-- <view class="middle" v-for="(item1,index1) in packageList.orderpackages" :key="item1.id">
						<view class="item">
							<view class="label">
								物品名称
							</view>
							<view class="data">
								{{item1.name}}
							</view>
						</view>
						<view class="item">
							<view class="label">
								物品价值
							</view>
							<view class="data">
								￥{{item1.price}}
							</view>
						</view>
						<view class="item">
							<view class="label">
								商品类型
							</view>
							<view class="data">
								{{item1.goodstype}}
							</view>
						</view>
						<view class="item borderB">
							<view class="label">
								运输方式
							</view>
							<view class="data">
								{{packageList.ys_type}}
							</view>
						</view>
					</view> -->
				</view>
				<view class="bottom">
					<u-radio-group v-model="value">
					<view class="item1">
						<view class="item_wrapper">
							<view class="image1">
								<image src="../../../static/image/weixin-7@2x.png" mode=""></image>
							</view>
							<view class="text">
								微信支付
							</view>
						</view>
						<view class="check">
							<u-radio 
								name="wechat"
								active-color="#f7cc46"
								shape="circle"
							></u-radio>
						</view>
					</view>
					<view class="item1">
						<view class="item_wrapper">
							<view class="image">
								<image src="../../../static/image/yue-4@2x.png" mode=""></image>
							</view>
							<view class="text">
								余额支付(￥{{money}})
							</view>
						</view>
						<view class="check">
							<u-radio
								name="yue"
								active-color="#f7cc46"
								shape="circle"
							></u-radio>
						</view>
					</view>
					</u-radio-group>
				</view>
				<view class="btn" @click="toPay">
					<button>确认支付</button>
				</view>
			</view>
		</view>
		<view class="toast" v-show="isShow">
				<view class="image">
					<image src="../../../static/image/daku@2x(1).png" mode=""></image>
				</view>
				<view class="text1">
					{{msg}}
				</view>
				<view class="text2">
					{{tip}}
				</view>
				<view class="sure" @click="hideToast">
					<button>我知道了</button>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				packageList:{},
				money:uni.getStorageSync("userInfo").money,
				value:"wechat",
				isShow:false,
				msg:"",
				tip:""
			}
		},
		onShow() {
			
		},
		async onLoad(option) {
			let {id}=option;
			this.packageList=await this.getPackageList(id)
		},
		methods: {
			async getPackageList(id){
				let token=uni.getStorageSync("token");
				const {data}=await this.$http({
					url:"order/order_info?id="+id,
					header:{
						token
					},
				})
				return data.data
			},
			async toPay(){
				if(this.value==""){
					return
				}
				if(this.value=="wechat"){
					const res=await this.surePay("wechat")
					console.log(res)
					let {data}=res;
					uni.requestPayment({
						timeStamp:data.timeStamp,
						nonceStr:data.nonceStr,
						package:data.package,
						signType:data.signType,
						paySign:data.paySign,
						success:async ()=>{
							await this.getUserInfo()
							uni.navigateTo({
								url:"/pages/user/payfinish/payfinish"
							})
						},
						fail:(e)=>{
							console.log(e)
							// this.msg="你的账户余额不足"
							// this.isShow=true
							// this.tip="请更换支付方式"
						}
					})
					return;
				}
				if(this.value=="yue"){
					const data=await this.surePay("yue")
					if(data.code!==1){
						this.msg=data.msg
						this.isShow=true
						this.tip="请联系客服充值"
						return;
					}
					uni.navigateTo({
						url:"/pages/user/payfinish/payfinish?money="+this.packageList.price
					})
				}
			},
			async surePay(type){
				let token=uni.getStorageSync("token")
				let {id}=this.packageList
				const {data}=await this.$http({
					url:"order/pay",
					header:{
						token
					},
					data:{
						id,
						type
					}
				})
				return data
			},
			async getUserInfo(){
				let token=uni.getStorageSync("token");
				const {data}=await this.$http({
					url:"member/info",
					header:{
						token
					}
				})
				uni.setStorageSync("userInfo",data.data)
			},
			hideToast(){
				this.isShow=false
			}
		}
	}
</script>

<style scoped>
.bg{
	width: 100%;
	height: 100%;
	background-color: #F1F1F1;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
}
.bg1{
	position: fixed;
	background: #000000;
	z-index: 9000;
	width: 100%;
	height: 100%;
	opacity: 0.5;
}
.wrapper{
	padding: 30rpx;
}
.top{
	background-color: #FFFFFF;
	padding-top: 50rpx;
	padding-bottom: 50rpx;
	border-radius: 10rpx;
}
.num{
	text-align: center;
	font-size: 50rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #CA2929;
}
.order_sn{
	margin-top: 15rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	text-align: center;
}
.middle{
	margin-top: 40rpx;
}
.item{
	display: flex;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid rgba(151,151,151,0.2);
}
.label{
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
}
.data{
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
}
.borderB{
	border-bottom: none;
}
.bottom{
	margin-top: 20rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
}
.item1{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	padding-right:10rpx ;
	border-bottom: 1rpx solid rgba(151,151,151,0.2);
}
.image1 image{
	vertical-align: top;
	width: 53rpx;
	height: 48rpx;
}
.image image{
	vertical-align: top;
	width: 51rpx;
	height: 52rpx;
}
.text{
	margin-left: 20rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
}
.item_wrapper{
	display: flex;
	align-items: center;
}
.btn{
	margin-top: 20rpx;
}
.btn button{
	width: 690rpx;
	height: 80rpx;
	background: #F7CC46;
	border-radius: 40rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FDFBFB;
}
.toast{
	position: fixed;
	z-index: 9999;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 520rpx;
	height: 381rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	text-align: center;
}
.toast .image{
	margin:30rpx 0;
}
.toast .image image{
	height: 85rpx;
	width: 79rpx;
}
.toast .text1{
	margin: 0 auto;
	margin-bottom:10rpx ;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
}
.toast .text2{
	margin: 10rpx 0 20rpx 0;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
}
.toast .sure button{
	width: 240rpx;
	height: 80rpx;
	background: #F7CC46;
	border-radius: 40rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FDFBFB;
}
</style>
